<template>
  <a-row type="flex">
    <a-col flex="500px">
      <a-card :bordered="false" class="dictList">
        <!-- 按钮操作区域 -->
        <a-row style="margin-left: 14px; margin: -10px -10px  0 " class="topBtngroup">
          <a-button @click="handleAdd(1)" type="primary">新增字典分类</a-button>
        </a-row>
        <div style="background: #fff; margin: 0px -5px;">
          <!-- 树-->
          <a-col :scroll="{ x:200 , y:innerHeight}" :md="10" :sm="24" class="treeHeight">
            <template>
              <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
               <span style="user-select: none">
            <a-tree
              multiple
              @select="onSelect"
              @rightClick="rightHandle"
              :selectedKeys="selectedKeys"
              :treeData="dictTree"
              :checkStrictly="checkStrictly"
              :expandedKeys="iExpandedKeys"
              :autoExpandParent="autoExpandParent"
              @expand="onExpand"/>
                </span>
                <!--新增右键点击事件,和增加添加和删除功能-->
                <a-menu slot="overlay">
                  <a-menu-item @click="handleAdd(2)" key="1">新增</a-menu-item>
                  <a-menu-item @click="handleAdd(3)" key="2">编辑</a-menu-item>
                  <a-menu-item @click="handleDelete" key="3">删除</a-menu-item>
                  <a-menu-item @click="closeDrop" key="4">取消</a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>
          </a-col>
        </div>
      </a-card>
    </a-col>
    <a-col flex="auto" style="margin-left: 12px" class="dicRight">
      <a-card :bordered="false">
        <a-tabs defaultActiveKey="1">
          <a-tab-pane tab="字典信息" key="1" class="treeHeight">
            <!-- 按钮操作区域 -->
            <a-row style="margin-left: 14px;" class="topBtngroup" :hidden="dictItemAddbtn">
              <a-button @click="itemHandleAdd(1)" type="primary">新增字典项</a-button>
            </a-row>
            <div style="background: #fff; margin: 0px -5px;">
              <!-- 树-->
              <a-col :scroll="{ x:200 , y:innerHeight}" :md="10" :sm="24">
                <template>
                  <a-dropdown :trigger="[this.itemDropTrigger]" @visibleChange="itemDropStatus">
                 <span style="user-select: none">
              <a-tree
                multiple
                @select="itemOnSelect"
                @rightClick="itemRightHandle"
                :selectedKeys="itemSelectedKeys"
                :treeData="dictItemTree"
                :checkStrictly="checkStrictly"
                :expandedKeys="itemIExpandedKeys"
                :autoExpandParent="itemAutoExpandParent"
                @expand="itemOnExpand"/>
                  </span>
                    <!--新增右键点击事件,和增加添加和删除功能-->
                    <a-menu slot="overlay">
                      <a-menu-item @click="itemHandleAdd(2)" key="1">新增</a-menu-item>
                      <a-menu-item @click="itemHandleAdd(3)" key="2">编辑</a-menu-item>
                      <a-menu-item @click="itemHandleDelete" key="3">删除</a-menu-item>
                      <a-menu-item @click="itemCloseDrop" key="4">取消</a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </template>
              </a-col>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-col>
    <dict-modal ref="dictModal" @ok="loadTree"></dict-modal>
    <dict-item-modal ref="dictItemModal" @ok="loadItemTree"></dict-item-modal>
  </a-row>
</template>
<script>
  import DictModal from './modules/DictModal'
  import DictItemModal from './modules/DictItemModal'
  import pick from 'lodash.pick'
  import { queryDictTreeList, queryDictItemTreeList, deleteByDictId, deleteByDictItemId } from '@/api/api'
  import {httpAction, deleteAction} from '@/api/manage'
  import {KsListMixin} from '@/mixins/KsListMixin'
  export default {
    name: 'DictList',
    mixins: [KsListMixin],
    components: {
      DictModal,
      DictItemModal
    },
    data() {
      return {
        iExpandedKeys: [],
        itemIExpandedKeys: [],
        loading: false,
        autoExpandParent: true,
        itemAutoExpandParent: true,
        currFlowId: '',
        currFlowName: '',
        disable: true,
        treeData: [],
        itemTreeData :[],
        visible: false,
        dictTree: [],
        dictItemTree: [],
        rightClickSelectedKey: '',
        rightClickSelectedName: '',
        rightClickSelectedDictCode: '',
        rightClickSelectedSortOrder: '',
        rightClickSelectedDescription: '',
        itemRightClickSelectedKey: '',
        itemRightClickSelectedText: '',
        itemRightClickSelectedValue: '',
        itemRightClickSelectedSortOrder: '',
        itemRightClickSelectedStatus: '',
        itemRightClickSelectedDescription: '',
        hiding: true,
        itemHiding: true,
        dictItemAddbtn: true,
        selectedRecord:{},
        model: {},
        itemModel: {},
        dropTrigger: '',
        itemDropTrigger: '',
        dict: {},
        disableSubmit: false,
        selectedKeys: [],
        itemSelectedKeys: [],
        autoIncr: 1,
        currSelected: {},
        itemCurrSelected: {},

        allTreeKeys:[],
        allItemTreeKeys:[],
        checkStrictly: true,

        form: this.$form.createForm(this),
        labelCol: {
          xs: {span: 24},
          sm: {span: 5}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },
        graphDatasource: {
          nodes: [],
          edges: []
        },
        url: {
          delete: '/platform/system/sysDict/delete',
          edit: '/platform/system/sysDict/edit',
          deleteBatch: '/platform/system/sysDict/deleteBatch',
        },
        orgCategoryDisabled:false,
      }
    },
    methods: {
      loadData() {
        this.refresh();
      },
      loadTree() {
        var that = this
        that.treeData = []
        that.dictTree = []
        queryDictTreeList().then((res) => {
          if (res.success) {
            //部门全选后，再添加部门，选中数量增多
            this.allTreeKeys = [];
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.treeData.push(temp)
              that.dictTree.push(temp)
              that.setThisExpandedKeys(temp)
              that.getAllKeys(temp);
            }
            this.loading = false
          }
        })
      },
      loadItemTree(){
        console.log(this.selectedRecord);
        this.loadDictItemTree(this.selectedRecord);
      },
      setThisItemExpandedKeys(node) {
        if (node.children && node.children.length > 0) {
          this.itemIExpandedKeys.push(node.key)
          for (let a = 0; a < node.children.length; a++) {
            this.setThisItemExpandedKeys(node.children[a])
          }
        }
      },
      setThisExpandedKeys(node) {
        if (node.children && node.children.length > 0) {
          this.iExpandedKeys.push(node.key)
          for (let a = 0; a < node.children.length; a++) {
            this.setThisExpandedKeys(node.children[a])
          }
        }
      },
      refresh() {
        this.loading = true
        this.loadTree()
      },
      // 右键操作方法
      rightHandle(node) {
        this.dropTrigger = 'contextmenu'
        this.rightClickSelectedKey = node.node.eventKey
        this.rightClickSelectedName = node.node.title
        this.rightClickSelectedDictCode = node.node.$vnode.data.props.dictCode
        this.rightClickSelectedSortOrder = node.node.$vnode.data.props.sortOrder
        this.rightClickSelectedDescription = node.node.$vnode.data.props.description
      },
      itemRightHandle(node) {
        this.itemDropTrigger = 'contextmenu'
        this.itemRightClickSelectedKey = node.node.eventKey
        this.itemRightClickSelectedText = node.node.$vnode.data.props.itemText
        this.itemRightClickSelectedValue = node.node.$vnode.data.props.itemValue
        this.itemRightClickSelectedSortOrder = node.node.$vnode.data.props.sortOrder
        this.itemRightClickSelectedStatus = node.node.$vnode.data.props.status
        this.itemRightClickSelectedDescription = node.node.$vnode.data.props.description
      },
      onExpand(expandedKeys) {
        this.iExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      itemOnExpand(expandedKeys) {
        this.itemIExpandedKeys = expandedKeys
        this.itemAutoExpandParent = false
      },
      // 右键点击下拉框改变事件
      dropStatus(visible) {
        if (visible == false) {
          this.dropTrigger = ''
        }
      },
      // 右键点击下拉框改变事件
      itemDropStatus(visible) {
        if (visible == false) {
          this.itemDropTrigger = ''
        }
      },
      // 右键下拉关闭下拉框
      closeDrop() {
        this.dropTrigger = ''
      },
      // 右键下拉关闭下拉框
      itemCloseDrop() {
        this.itemDropTrigger = ''
      },
      nodeModalOk() {
        this.loadTree()
      },
      onSelect(selectedKeys, e) {
        this.hiding = false
        this.dictItemAddbtn = false
        this.selectedRecord = e.node.dataRef
        let record = e.node.dataRef
        this.currSelected = Object.assign({}, record)
        this.model = this.currSelected
        this.selectedKeys = [record.key]
        this.model.parentId = record.parentId
        this.loadDictItemTree(record)

      },
      itemOnSelect(selectedKeys, e) {
        this.itemHiding = false
        let itemRecord = e.node.dataRef
        this.itemCurrSelected = Object.assign({}, itemRecord)
        this.itemModel = this.itemCurrSelected
        this.itemSelectedKeys = [itemRecord.key]
        this.itemModel.parentId = itemRecord.parentId
      },
      // 触发onSelect事件时,为部门树右侧的form表单赋值
      loadDictItemTree(record) {
        var that = this
        that.itemTreeData = []
        that.dictItemTree = []
        queryDictItemTreeList({dictId: record.key}).then((res) => {
          if (res.success) {
            //部门全选后，再添加部门，选中数量增多
            this.allItemTreeKeys = [];
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.itemTreeData.push(temp)
              that.dictItemTree.push(temp)
              that.setThisItemExpandedKeys(temp)
              that.getAllItemKeys(temp);
            }
            this.loading = false
          }
        })
      },
      getCurrSelectedTitle() {
        return !this.currSelected.title ? '' : this.currSelected.title
      },
      handleAdd(num) {
        if (num == 1) {
          this.$refs.dictModal.add()
          this.$refs.dictModal.title = '新增'
        } else if (num == 2)  {
          this.$refs.dictModal.add(this.rightClickSelectedKey,this.rightClickSelectedName)
          this.$refs.dictModal.title = '新增'
        } else if (num == 3)  {
          this.$refs.dictModal.editDict(this.rightClickSelectedKey,this.rightClickSelectedName,this.rightClickSelectedDictCode,this.rightClickSelectedSortOrder,this.rightClickSelectedDescription)
          this.$refs.dictModal.title = '编辑'
        }
      },
      itemHandleAdd(num) {
        if (num == 1) {
          this.$refs.dictItemModal.insertDictItem(this.selectedRecord.key,this.selectedRecord.dictName)
          this.$refs.dictItemModal.title = '新增'
        } else if (num == 2) {
          this.$refs.dictItemModal.addDictItem(this.itemRightClickSelectedKey,this.itemRightClickSelectedText)
          this.$refs.dictItemModal.title = '新增'
        } else if (num == 3)  {
          this.$refs.dictItemModal.editDictItem(this.itemRightClickSelectedKey,this.itemRightClickSelectedText,this.itemRightClickSelectedValue,this.itemRightClickSelectedSortOrder,this.itemRightClickSelectedStatus,this.itemRightClickSelectedDescription)
          this.$refs.dictItemModal.title = '编辑'
        }
      },
      handleDelete() {
        var that = this
        this.$confirm({
          title: '确认删除',
          content: '确定要删除此字典项以及子节点数据吗?',
          onOk: function () {
            deleteByDictId({id: that.rightClickSelectedKey}).then((resp) => {
              if (resp.success) {
                //删除成功后，去除已选中中的数据
                that.$message.success('删除成功!')
                that.loadTree()
                that.loadItemTree()
              } else {
                that.$message.warning('删除失败!')
              }
            })
          }
        })
      },
      itemHandleDelete() {
        var that = this
        this.$confirm({
          title: '确认删除',
          content: '确定要删除此字典以及子节点数据吗?',
          onOk: function () {
            deleteByDictItemId({id: that.itemRightClickSelectedKey}).then((resp) => {
              if (resp.success) {
                //删除成功后，去除已选中中的数据
                that.$message.success('删除成功!')
                that.loadItemTree()
              } else {
                that.$message.warning('删除失败!')
              }
            })
          }
        })
      },
      getAllKeys(node) {
        this.allTreeKeys.push(node.key)
        if (node.children && node.children.length > 0) {
          for (let a = 0; a < node.children.length; a++) {
            this.getAllKeys(node.children[a])
          }
        }
      },
      getAllItemKeys(node) {
        this.allTreeKeys.push(node.key)
        if (node.children && node.children.length > 0) {
          for (let a = 0; a < node.children.length; a++) {
            this.getAllItemKeys(node.children[a])
          }
        }
      }
    },
    created() {
      this.currFlowId = this.$route.params.id
      this.currFlowName = this.$route.params.name
    },

  }


</script>
<style>
  .ant-card-body .table-operator {
    margin: 7px;
  }

  .anty-form-btn {
    width: 100%;
    text-align: center;
  }

  .anty-form-btn button {
    margin: 0 5px;
  }

  .anty-node-layout .ant-layout-header {
    padding-right: 0
  }

  .header {
    padding: 0 8px;
  }

  .header button {
    margin: 0 3px
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }


  /** Button按钮间距 */
  .topBtngroup .ant-btn {
    margin-right: 8px;
  }
  .topBtngroup{
    border-bottom: 1px solid #e8e8e8;
    padding: 10px 6px;
  }
  .treeHeight{
    height: calc(100vh - 196px);
    width: 100%;
    overflow: auto;
  }
  .dictList .drawer-bootom-button{
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: left;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
  .ant-layout-footer{
    display: none;
  }
  .dictList .ant-tabs-nav-wrap>div{
    padding-left: 15px;
  }
  .dicRight .ant-tabs-bar{
    margin: 0 !important;
  }
</style>